[M5Stack Core2 for AWS] Arduinoで仮想ボタンを作成してみました

SIN

2021.07.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

1 はじめに

IoT事業部の平内（SIN）です。

以前、Core2 for AWS IoT EduKit BSPの動作確認の中で、ディスプレイの表示（LVGLライブラリ）を確認してみました。

LVGLライブラリでは、各種のコントロールが用意されており、その中でも、ボタンは、簡単に利用でき非常に美しいと感じてました。

今回は、このようなイメージのボタンを、簡単に使えるようにArduinoでクラスを作成してみました。最初に、使用している様子です。

2 main()

先の動画のmainコードは、以下のとおり非常にシンプルです。new VButton() でオブジェクトを生成し、コールバック関数で、ボタンの操作を処理できます。

ボタンは、タップとトグルの2つのモードが利用可能です。また、ボタンの色は、デフォルトで赤色ですが、コンストラクタ自由な色を指定できます。

#include <M5Core2.h>
#include "VButton.h"

VButton *red_button;
VButton *blue_button;
VButton *green_button;

void button_callback(char *title, bool use_toggle, bool is_toggled){
    if (use_toggle) {
        Serial.printf("%s Toggled. %d\n", title, is_toggled);
    } else {
        Serial.printf("%s Tapped.\n", title);
    }
}

void setup() {
    M5.begin(true, true, true, true);
    M5.Lcd.setBrightness(200);
    M5.Lcd.fillScreen(WHITE);

    red_button = new VButton("red_button", button_callback, true, -70);
    blue_button = new VButton("blue_button", button_callback, false, 0, BLUE);    
    green_button = new VButton("green_button", button_callback, false, 70, TFT_DARKGREEN);
}

void loop() {
    red_button->loop();
    blue_button->loop();
    green_button->loop();
}

3 リファレンス

(1) constructor

VButton(char *title,
        void (* callback)(char *, bool, bool),
        bool use_toggle = false,
        int position = 0,
        ushort color = RED);

title 表示される文字列（必須）
callback ボタン操作時に呼ばれるコールバック関数（必須）
use_toggle トグルモードの有効無効 [デフォルト:false] (オプション)
position 表示位置 [デフォルト:0] (オプション)
color 表示色 [デフォルト:RED] (オプション)

(2) callback

void (* callback)(char title*, use_toggle bool, is_toggled bool);

コンストラクタで指定するコールバック関数の型です。

title 表示される文字列（コンストラクタで指定したもの）
use_toggle トグルモードの有効無効
is_toggled 現在のトグル状態（use_toggle=trueの時のみ有効な値）

(3) loop

void loop()

タップ操作を取得するため、メインプログラムのloopの中で呼び出す必要があります。

例）

void loop() {
    button->loop();
}

4 カラー

この仮想ボタンのライブラリでは、色の指定が簡単できるようになっています。少し時間かけたので説明させてください。

コンストラクタでは、枠の色のみを指定します。そして、その他の色は、枠の色を基準に以下のよう修正された値が使用されます。

ボタン本体の通常状態の色：枠色より200 明い色
ボタン本体のトグル状態の色：枠色より100 明い色

この色を生成している要領は以下の通りです。

(1) RGB分解

M5.Lcdの色は、RED:5bit、GREEN：:6bit、BLUE:5bitで表現されています。

RGBに分解しているコードです。

void VButton::get_rgb(ushort color, ushort rgb[3]){
    rgb[0] = (color & 0xF800) >> 8;
    rgb[1] = (color & 0x07E0) >> 3;
    rgb[2] = (color & 0x001F) << 3;
}

(2) 明度調整

RGBそれぞれの明度を調整しています。

for(int i=0; i<3; i++) {
  rgb[i] += 200;
  if (rgb[i] > 0xFF) {
    rgb[i] = 0xFF;
  }
}

(3) RGB合成

最後にRGBを元の形に結合します。

ushort VButton::create_color(ushort rgb[3]){
  return ((rgb[0]>>3)<<11) | ((rgb[1]>>2)<<5) | (rgb[2]>>3);
}

上記を組み合わせて通常のボタンの色を生成しているコードです。

ushort VButton::create_background_color_normal(ushort color){
    ushort rgb[3];
    this->get_rgb(color, rgb);
    for(int i=0; i<3; i++) {
        rgb[i] += 200;
        if (rgb[i] > 0xFF) {
            rgb[i] = 0xFF;
        }
    }
    return this->create_color(rgb);
}